<template>
  <div class="w-7xl m-auto">
    <h5>尝试Vue3.5.8版本</h5>
    <!-- 筛选搜索 -->
    <el-form :inline="true">
      <el-form-item label="名称">
        <el-input
          v-model.trim="queryParams.query"
          @keyup.enter="handleSearch"
          style="width: 200px"
          placeholder="请输入名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch"><i-ep-search />搜索</el-button>
        <el-button @click="resetQuery('search')"><i-ep-refresh />重置</el-button>
        <el-button type="primary" @click="handleDelete"><i-ep-search />批量操作</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="primary" @click="handleMap">地图画布</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <super-table
      ref="usePinotRef"
      data-root="stations"
      v-bind="tableConfig"
      :queryForm="queryParams"
      @selection-change="handleSelectionChange"
      :requestApi="getTableList"
      @get-api-data="getApiData"
    >
      <!--   :row-class-name="tableRowClassName"  @cell-click="handleRow"-->
      <template #station_name="scope">
        <div class="text-[#1f5898]">{{ scope.row.station_name }}</div>
        <div v-if="scope.row?.identifier" class="text-[#1f5898] flex cursor-pointer items-center w-full">
          <div class="mr-1 w-full">
            {{ scope.row?.identifier }}
            <svg-icon icon-class="treeEmit" size="12" />
          </div>
        </div>
      </template>
      <template #handler="scope">
        <el-button
          v-for="item in buttons"
          :key="item.text"
          :type="item.type"
          size="small"
          link
          @click.stop="handleOperate(item, scope.row)"
          >{{ item.text }}</el-button
        >
      </template>
    </super-table>
    <!-- 新增、编辑等弹窗 -->
    <push-dialog
      ref="useTempPushRef"
      :title="`${type === 'edit' ? '编辑' : '新增'}`"
      :type="type"
      @handle-close="closeDialog"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, useTemplateRef } from "vue";
import SuperTable from "@/components/SuperTable/index.vue";
import pushDialog from "./components/pushDialog.vue";
import { useConfirm } from "@/hooks/useConfirm";
import { tableConfig } from "./tableConfig";
import { getPoint } from "@/api/dict";
import router from "@/router";
const title = ref<string>("");
const type = ref<string>("");
const useTempPushRef = useTemplateRef("useTempPushRef");
const usePinotRef = useTemplateRef("usePinotRef");
const buttons = [
  { type: "primary", text: "编辑", prop: "edit" },
  { type: "danger", text: "删除", prop: "delete" },
] as const;
const queryParams = reactive({
  query: "",
});
const getTableList = (params: any) => {
  return getPoint(params);
};
// 新增
const handleAdd = () => {
  type.value = "add";
  useTempPushRef.value?.openDialog({});
};
// 操作
const handleOperate = (_type: any, _row: any) => {
  console.log(_type, "type");
  switch (_type.prop) {
    case "edit":
      title.value = "编辑";
      type.value = _type.prop;
      useTempPushRef.value?.openDialog(_row);
      break;
    case "delete":
      handleDelete(_row);
      break;
    default:
  }
};

// 搜索
const handleSearch = () => {
  usePinotRef.value?.handleSearch();
};
// 重置
const resetQuery = (str?: string) => {
  if (str === "search") {
    queryParams.query = "";
  }
  handleSearch();
};
// 关闭回调
const closeDialog = (isClose?: boolean) => {
  if (isClose) {
    resetQuery();
  }
};
// 多选
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val.map((item: any) => item.station_id);
};
// 删除
const handleDelete = async (_row: any) => {
  const ids = [_row.station_id || multipleSelection.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾删除除项");
    return;
  }
  let message = `是否删除选择，删除后不可以恢复?`;
  const { showConfirm } = useConfirm("警告", message);
  const confirmed = await showConfirm();
  if (confirmed) {
    ElMessage.success("删除成功");
    resetQuery();
  }
};

// const handleRow = () => {};
// // 表格数据回调
const getApiData = (_row: any) => {
  // console.log(_row, "表格数据回调");
};
// 设置行的样式
// type Sequence = {
//   sequenceId: number;
// };
// const sequenceData = ref<Sequence>();
// const tableRowClassName = ({ row }) => {
//   if (row.sequenceId === sequenceData.value?.sequenceId) {
//     return "warning-row";
//   }
//   return "";
// };

// 地图画布
const handleMap = () => {
  router.push("/business/mapManagement");
}
</script>
